<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>天天生鲜-登陆</title>
<link rel="icon" href="images/yclogo.png">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/login.css">
</head>

<body>
	<!-- logo区区域 -->
	<div class="login_top">
    	<a href="index.html" class="login_logo"><img src="images/logo02.png"></a>
    </div>
	
	<!-- 内容区域 -->
    <div class="login_form_bg">
    	<div class="login_form_wrap clearfix">
        	<div class="login_banner fl"></div>
            <div class="slogn fl">日夜兼程 · 急速送达</div>	
            <div class="login_form fr">
                <div class="login_title	clearfix">
                    <h1 class="fl">用户登陆</h1>
                    <a href="register.html" class="fl">立即注册</a>
                </div>
				<!-- 登录区域 -->
                <div class="form_input clearfix" id="login">
                    <form>
						<ul>
                            <li>
                                <input type="text" name="nickname" v-model="nickName" class="name_input" id="nickname" placeholder="请输入用户名" id="nickname">
                                <div class="user_error">输入错误</div>
                            </li>
                            <li>
                                <input type="password" name="pwd" v-model="pwd" class="pwd_input" id="pwd" placeholder="请输入密码" id="pwd">
                                <div class="pwd_error">密码错误</div>
                            </li>
                            <li>
                            	<div>
                                <input type="text" v-model="yzm" name="yzm" id="yzm" class="yzm_input"
                                placeholder="请输入验证码">
                                    <img id="code-img" src="http://localhost:20001/freshgood-security/security/freshgood/code.action" alt=""style="width: 100px; height: 35px; margin-top: -10px;" >
                                </div>
                                    <!--<img id="code" src="http://localhost:8080/Fresh/VerifyCodeServlet">
                                    <img id="image" src="code/getCode" title="验证码图" onclick="refresh(this)"/>
                                    -->
                                <div class="code_error">验证码错误</div>
                            </li>
                            <li>
                                <div class="more_input clearfix">
                                    <input type="checkbox" name="" id="remember">
                                    <label for="remember">记住用户名</label>
                                    <a href="#">忘记密码</a>
                                </div>
                            </li>
                            <li>
                               <input type="button" value="登录" class="submit_input" @click = "login()">
                            </li>
                      	</ul>
                    </form>
                </div>
            </div>
         </div>
    </div>
	
	<!-- 版权所有-->
    <div class="footer">
    	<div class="foot_link">
        	<a href="#">关于我们</a><span> | </span>
        	<a href="#">联系我们</a><span> | </span>
        	<a href="#">招聘广告</a><span> | </span>
            <a href="#">友情链接</a>
        </div>
        <p>CopyRight &copy;  2019 衡阳市源辰信息科技有限公司 All Rights Reserverd</p>
        <p>电话：0734-8355998 湘ICP备16015987号</p>
    </div>
	<script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/qs.js"></script>
	<script>
        let app = new Vue({
            el:"#login",
            data:{
                nickName:'tt',
                pwd:'123',
                yzm:''
            },
            mounted() {
                document.addEventListener("keydown", (e) => {
                    if (e.key === "Enter") {
                        this.login();
                    }
                });
            },
            methods:{
                login:function () {
                    // console.log("yzm:"+this.yzm);
                    if(this.yzm==null || this.yzm.length===0){
                        alert("请输入验证码！");
                        return;
                    }
                        axios.post("http://localhost:20001/freshgood-security/security/freshgood/resuser.action",
                        qs.stringify({
                            username: this.nickName,
                            pwd : this.pwd,
                            valcode : this.yzm
                        }))
                    // })
            .then(rs =>{
                        // console.log(rs);
                        // console.log(rs.data);
                        if(rs.data.code===1){
                            localStorage.setItem('token', 'Bearer ' + rs.data.token);
                            window.location.href="index.html";
                        }else if(rs.data.code===0){
                            alert("验证码错误！");
                            updateCaptcha();
                        }else if(rs.data.code===2){
                            alert("该用户已被封禁！");
                            updateCaptcha();
                        }else{
                            alert("请检查账号密码是否正确！");
                            updateCaptcha();
                        }
                    });
                }
            }
        });

        // 获取验证码图片元素
        var captchaImg = document.getElementById("code-img");

        // 根据点击按钮或其他事件来触发验证码更新
        function updateCaptcha() {
            // 更新验证码图片的src属性为一个随机值
            captchaImg.src = "http://localhost:20001/freshgood-security/security/freshgood/code.action?" + new Date() + Math.random()*1000;
        }
        $(function () {
            //验证码单击换图
            $("#code-img").click(function () {
                //src属性表示验证码img标签的图片路径 可读 可写
                // alert(this.src);
                // http://localhost:8080/freshgoods/kaptcha.jpg
                this.src = "http://localhost:20001/freshgood-security/security/freshgood/code.action?s=" + new Date() + Math.random()*1000;
            });
        });
        /*
         缓存的名称由最后的资源名称和参数组成
        * 验证码需要跳过浏览器的缓存，而发起请求给服务器获取验证码
        所以在请求后可以加一个随机数（时间戳）就可以跳过缓存辣
        *
        * */
	</script>
</body>
</html>
